<!DOCTYPE html
   PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no,mail=yes">
   <title>Index</title>

   <script src="./js/jquery-1.8.3.min.js"></script>
   <script src="./js/swiper.min.js"></script>
   <link rel="stylesheet" href="./layui/css/layui.css">
   <link rel="stylesheet" href="./css/iconfont.css">
   <link rel="stylesheet" href="./css/animate.css">
   <link rel="stylesheet" href="./css/swiper.min.css">
   <link rel="stylesheet" href="./css/common.css">
   <link rel="stylesheet" href="./css/index.css">
   <script src="./js/wow.min.js"></script>
   <script type="text/javascript" src="./js/clipboard.min.js"></script>
   <script type="text/javascript" src="./layui/layui.js"></script>
</head>

<body>
   <header class="headerpage " data-load="header"></header>
   <main class="user_page  ">
      <section class="">
         <div class="layui-main">
            <div class="user_con">
               <div class="user_headpage" data-load="user_active_header"></div>
               <div class="right_main ">

                  <p class="ft24 mb10 ft-bold">職涯發展</p>
                  <p class="ft14 gary_c9 mb20 ft-bold">你可以透過 mail 發送公關票</p>
                  <div class="block_com ">
                     <div class="ft-bold line2 mb30">
                        <p>活動名稱：werwe</p>
                        <p>活動時間：2023.09.27 (三) 04:20 - 09.28 (四) 04:20 (GMT+8)</p>
                        <p>活動形式：線下活動</p>
                        <p>活動地點：AustriaTirolwe</p>
                     </div>
                     <div class="layui-form mb30">
                        <table class="layui-table a9_table " lay-skin="line">
                           <colgroup>
                           </colgroup>
                           <thead>
                              <tr>
                                 <th>
                                    <div class="ml25">票券名稱</div>
                                 </th>
                                 <th>
                                    <p class="tac">狀態</p>
                                 </th>
                                 <th class="tac">
                                    <p class="tac">售價</p>
                                 </th>
                                 <th class="tac">
                                    <p class="tac">庫存與總數</p>
                                 </th>
                              </tr>
                           </thead>
                           <tbody class="ft-bold ">
                              <tr>
                                 <td class="d-flex al-c"><input type="checkbox" name="arr[0]" class="mr10" value="胜多负少"
                                       id="1">胜多负少
                                 </td>
                                 <td class="tac">結束販售</td>
                                 <td class="tac">免费</td>
                                 <td class="tac">10/10</td>

                              </tr>
                           </tbody>
                        </table>

                     </div>
                     <p class="ft18 ft-bold mb20">你選擇的票券內容</p>
                     <div class="d-flex layui-row layui-col-space20 ">
                        <div class="layui-col-md7 layui-col-xs12">
                           <div class="uapt_b1">
                              <p>胜多负少的 *1</p>

                           </div>
                        </div>
                        <div class="layui-col-md5 layui-col-xs12">
                           <p class="gary_c6 ft12 line18">1. 每次操作寄送只能針對相同的票券組合，如果你需要寄送不
                              同的票券內容，請分多次操作。出票結果可以到 參加名單 中
                              確認。<br>
                              2. 此票券發送功能不受到前台售票頁面的規則限制，只管票券
                              或商品的庫存數量是否足夠，因此請特別留意您的操作與資料
                              正確性。<br>
                              3. 發送後邀請信函立即發送，您可以透過名單管理取消該票券
                              資格，但無法回收信件，請注意。 </p>
                        </div>
                     </div>
                     <div class="tac ft18 mb30 mt40">
                        <p class="mb16 ft-bold">贈票邀請名單（票券將寄送到受邀人電子信箱）</p>
                        <p class="orange_c ">第 1 位</p>
                     </div>
                     <from class="layui-form">

                        <div class="layui-form-item">
                           <div class="label must">姓名</div>
                           <div class="">
                              <input type="text" name="username" lay-verify="required" placeholder="" autocomplete="off"
                                 class="layui-input">
                           </div>

                        </div>
                        <div class="layui-form-item">
                           <div class="label must">電子郵件</div>
                           <div class="">
                              <input type="text" name="username" lay-verify="required" placeholder="" autocomplete="off"
                                 class="layui-input">
                           </div>

                        </div>
                        <div class="layui-form-item">
                           <div class="label must">行動電話</div>
                           <div class="">
                              <input type="text" name="username" lay-verify="required" placeholder="" autocomplete="off"
                                 class="layui-input">
                           </div>
                        </div>
                        <p class="d-flex jc-fe ">

                           <a class="ft12 orange_c">新增受邀人</a>
                        </p>
                        <div class="flex-column-center tac">
                           <span class="ft14 mt8 mb15">共 1 位</span>

                           <button class="layui-btn layui-btn-lg layui-bg-orange">寄出电子票券</button>
                        </div>
                     </from>
                  </div>
               </div>
            </div>
         </div>
      </section>
   </main>

</body>
<script src="./js/index.js"></script>
<script>

   layui.use(['form', 'laydate', 'util'], function () {
      var form = layui.form;
      var form = layui.form;
      var layer = layui.layer;
      var laydate = layui.laydate;
      var util = layui.util;

      form.on('checkbox', function (data) {
         var id = $(data.elem).attr('id');
         var $item = $('.uapt_b1').find('[data-id=' + id + ']')
         if ($item.length > 0) {
            $item.remove()
         } else {
            $('<p data-id=' + id + '>' + data.value + '*1</p>').appendTo($('.uapt_b1'))
         }
      });
   })

</script>

</html>